<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点属性，方法，封装方法</title>
</head>

<body>
    <div class="box" id="box" style="background-color: green;">
        文本节点
        <!-- 我是注释节点 -->
        <h1>标题标签</h1>
        <a href="">a标签</a>
        <p>段落标签</p>
    </div>
    <script>
        // 1. 元素节点 1
        // 2. 属性节点 2
        // 3. 文本节点 3
        // 4. 注释节点 8
        // 5. document 9
        // 6. DocumentFragment 11
        var div = document.getElementsByTagName('div')[0];
        //nodeName 只读属性  元素节点的nodeName是标签名的大写 
        console.log('nodeName');
        console.log(div.nodeName)
        // nodeValue  可写 元素节点是没有nodeValue
        console.log('nodeValue');
        console.log(div.firstChild.nodeValue);
        // nodeType 只读  节点类型
        console.log('nodeType');
        console.log(div.nodeType);
        console.log("元素节点");
        console.log(elementChildren(div));
        function elementChildren(node) {
            // var arr = [],
            //     children = node.childNodes;

            // for (let i = 0; i < children.length; i++) {
            //     var chidItem = children[i];
            //     if (chidItem.nodeType === 1) {
            //         arr.push(chidItem);
            //     }
            // }
            // return arr

            // 类数组
            var temp = {
                'length': 0,
                'push': Array.prototype.push,
                'splice': Array.prototype.splice
            },
                len = node.childNodes.length
            for (let i = 0; i < len; i++) {
                var chidItem = node.childNodes[i];
                if (chidItem.nodeType === 1) {
                    // temp[temp['length']] = chidItem;
                    // temp['length']++;
                    temp.push(chidItem)
                }
            }
            return temp;
        }
   
        // attributes
        console.log('attributes');
        console.log(div.getAttributeNode('id'));
        console.log(div.attributes[1]);
        // 判断是否有子节点
        console.log(div.hasChildNodes());

        // DOM深入
        // 1.getElementById()
        // 存在Document.prototype

        
        // 2.getElementByName()
        // 存在Document.prototype

        // 3.getElementsByTagName
        // getElementsByClassName
        // querySelect querySelectAll
        // Document.prototype和Element.prototype都存在
        //body hade,可以直接在document上获取
        console.log(document.body);
        console.log(document.documentElement);
 </script>
</body>

</html>